<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Metronic Admin Theme #1 | Form Layouts</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <meta content="Preview page of Metronic Admin Theme #1 for form layouts" name="description" />
    <meta content="" name="author" />

    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="../../global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.css" />
    <link href="../../global/css/components.min.css" rel="stylesheet" id="style_components" type="text/css" />
    <link href="../../global/css/plugins.min.css" rel="stylesheet"  type="text/css" />
    <link rel="stylesheet" href="layui/css/layui.css"/>
    <link rel="stylesheet" href="../../custom/css/changeother.css"/>
<body>
<div class="portlet light">
    <div class="portlet-title tabbable-line">
        <ul class="nav nav-tabs">
            <li class="active">
                <a href="#portlet_tab1" data-toggle="tab">搜索表 </a>
            </li>
            <li>
                <a href="#portlet_tab2" data-toggle="tab">搜索关系 </a>
            </li>
            <li >
                <a href="#portlet_tab3" data-toggle="tab">搜索字段</a>
            </li>
        </ul>
    </div>
    <div class="portlet-body">
        <div class="tab-content">
            <div class="tab-pane active" id="portlet_tab1">
                    <table id="example1" class="table table-striped table-bordered">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>表</th>
                         <!--   <th>所在模式</th>-->
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="tBody1">

                        </tbody>
                    </table>

            </div>
            <div class="tab-pane" id="portlet_tab2">
                    <table id="example2" class="table table-striped table-bordered">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>关系</th>
                            <!--<th>关系中文名</th>
                            <th>所在表</th>-->
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="tBody2">

                        </tbody>
                    </table>
            </div>
            <div class="tab-pane" id="portlet_tab3">
                    <table id="example3" class="table table-striped table-bordered">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>字段</th>
                           <!-- <th>数据类型</th>
                            <th>所在数据对象</th>-->
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="tBody3">

                        </tbody>
                    </table>
            </div>
        </div>
    </div>
</div>
<!--搜索表的表格渲染-->
<script id="tpl1" type="text/html">
      <%for(var i = 0; i < list.length; i++) {%>
      <tr>
      <td><%:=(i+1)%></td>
      <td class="searchObjectChname" data-index="<%:=(list[i].objectId)%>">  <%:=(list[i].objectChname? list[i].objectChname+(list[i].tableName? '('+list[i].tableName+')':''):list[i].tableName )%> </td>
     <!--  <td></td>-->
        <td><a href="javascript:;" class="searchTable tableHref">在图中显示</a></td>
      </tr>
      <%}%>
</script>
<!--搜索关系的表格渲染-->
<script id="tpl2" type="text/html">
    <%for(var i = 0; i < list.length; i++) {%>
    <tr>
        <td><%:=(i+1)%></td>
        <td class="linkRelation" data-index="<%:=(list[i].objectId)%>" data-fkId="<%:=(list[i].fkId)%>"><%:=(list[i].phyFkName?list[i].phyFkName:list[i].fkChname)%></td>
       <!-- <td class="linkRelationCname"><%:=(list[i].fkChname?list[i].fkChname:'')%></td>-->
      <!--  <td class="searchFks"><%:=(list[i].objectId)%></td>-->
        <td><a href="javascript:;" class="searchLink tableHref">在图中显示</a></td>
    </tr>
    <%}%>
</script>
<!--搜索字段的表格渲染-->
<script id="tpl3" type="text/html">
    <%for(var i = 0; i < list.length; i++) {%>
    <tr>
        <td><%:=(i+1)%></td>
        <td class="searchFields" data-index="<%:=(list[i].objectId)%>"><%:=(list[i].columnChname? list[i].columnChname+ '('+ list[i].columnName+')':list[i].columnName)%></td>
        <!--<td><%:=(list[i].dataTypeFullText)%></td>
        <td class="searchFields"><%:=(list[i].objectId)%></td>-->
        <td><a href="javascript:;" class="searchTable tableHref">在图中显示</a></td>
    </tr>
    <%}%>
</script>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="../../global/plugins/datatables/datatables.min.js"></script>
<!--<script type="text/javascript" language="javascript" src="../../global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js"></script>-->
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="layui/layui.all.js"></script>
<script src="js/template.js"></script>
<script>

/*var searchTableView = {
    tableDataInsert : function(){
        //搜索表(第一个表)
        var dataObjects = {'list' : parent.data.object.dataObjects};
        $('#tBody1').html(template($('#tpl1').html(), dataObjects));
        this.dataTableRender('example1');

        //搜索关系(第二个表)
        var fksArr = [];
        $.each(parent.data.object.fks,function(i,v){
            fksArr.push(v);
            $.each(parent.data.object.dataObjects,function(){
                if(v.objectId == this.objectId){
                    this.objectChname?v.objectId = this.objectChname:v.objectId = this.tableName
                }
            })
        });
        var fks = {'list':fksArr};
        $('#tBody2').html(template($('#tpl2').html(), fks));
        console.log($('#tBody2'));
        this.dataTableRender('example2');

        //搜索字段(第三个表)
        var columnsArr = [];
        $.each(parent.data.object.dataObjects,function(i,v){
            $.each(v.columns,function(){
                columnsArr.push(this);

                if(v.objectId == this.objectId){
                    v.objectChname?this.objectId = v.objectChname:this.objectId = v.tableName
                }
            });
        });

        var columns = {'list':columnsArr};
        $('#tBody3').html(template($('#tpl3').html(), columns));
        this.dataTableRender('example3');
    },    //数据表格插入
    clickToSearchTable : function(){
        $(document).on('click','a',function(){
            var that = $(this);
            if(that.hasClass('searchTable')){    //所搜表
                $.each(parent.data.object.dataObjects,function(i,v){
                    if(v.objectChname == fieldName('.searchObjectChname') || v.tableName == fieldName('.searchObjectChname') || v.tableName == fieldName('.searchFields') ){
                        var cell = parent.graph.getCell(v.objectId);
                        cell.toFront();
                        console.log(cell);
                        var cellView =  parent.paper.findViewByModel(cell);
                        console.log(cellView);
                        cellView.$el.find('.body').addClass('eleHighlight');
                        if (!parent.paperScroller.isElementVisible(cell, { strict: true })) {
                            parent.paperScroller.scrollToElement(cell);
                        }
                    }
                })
            }
            else if (that.hasClass('searchLink')){  //搜索关系
                $.each(parent.data.object.fks,function(i,v){
                    if (v.phyFkName == fieldName('.linkRelation') || v.fkChname == fieldName('.linkRelationCname')){
                        var cell = parent.graph.getCell(v.fkId);
                        cell.toFront();
                        console.log(cell);
                        var cellView =  parent.paper.findViewByModel(cell);
                        cellView.$el.find('.connection').addClass('linkHighlight');
                        cellView.$el.find('.marker-target').addClass('linkTargetHighlight');

                    }
                });
                $.each(parent.data.object.dataObjects,function(i,v){
                    if (v.objectChname == fieldName('.searchFks') || v.tableName == fieldName('.searchFks')){
                        var cell = parent.graph.getCell(v.objectId);
                        if (!parent.paperScroller.isElementVisible(cell, { strict: true })) {
                            parent.paperScroller.scrollToElement(cell);
                        }
                    }
                })
            }
            function fieldName(a){
                return that.parent().siblings(a).text();
            }
        });
    },  //点击搜索表格
    dataTableRender : function(id){         //封装的方法
        $('#' + id).DataTable({
            paging: false,
            ordering:  false,
            language : {
                search : '搜索：'
            },
            info: false,
        });
    },
    init : function(){
        this.tableDataInsert();
        this.clickToSearchTable();
    }
};*/
console.log(parent.data.object.dataObjects);
var searchTableView = {
    tableDataInsert : function(){
        //搜索表(第一个表)
        var dataObjects = {'list' : parent.data.object.dataObjects};
        $('#tBody1').html(template($('#tpl1').html(), dataObjects));
        this.dataTableRender('example1');

        //搜索关系(第二个表)
        var fksArr = [];
        $.each(parent.data.object.fks,function(i,v){
            fksArr.push(v);
            $.each(parent.data.object.dataObjects,function(){
               /* if(v.objectId == this.objectId){
                    this.objectChname?v.objectId = this.objectChname:v.objectId = this.tableName
                }*/
            })
        });
        var fks = {'list':fksArr};
        console.log(fksArr);
        $('#tBody2').html(template($('#tpl2').html(), fks));
        console.log($('#tBody2'));
        this.dataTableRender('example2');

        //搜索字段(第三个表)
        var columnsArr = [];
        $.each(parent.data.object.dataObjects,function(i,v){
            $.each(v.columns,function(){
                columnsArr.push(this);
              //  console.log(this)
               /* if(v.objectId == this.objectId){
                    v.objectChname?this.objectId = v.objectChname:this.objectId = v.tableName
                }*/
            });
        });

        var columns = {'list':columnsArr};
        $('#tBody3').html(template($('#tpl3').html(), columns));
        this.dataTableRender('example3');
    },    //数据表格插入
    clickToSearchTable : function(){
        $(document).on('click','a',function(){
            var that = $(this);
            if(that.hasClass('searchTable')){    //所搜表
                $.each(parent.data.object.dataObjects,function(i,v){
                    if(v.objectId == fieldName('.searchFields') || v.objectId == fieldName('.searchObjectChname') ){
                        var cell = parent.graph.getCell(v.objectId);
                        cell.toFront();
                        console.log(cell);
                        var cellView =  parent.paper.findViewByModel(cell);
                        console.log(cellView);
                        cellView.$el.find('.body').addClass('eleHighlight');
                        if (!parent.paperScroller.isElementVisible(cell, { strict: true })) {
                            parent.paperScroller.scrollToElement(cell);
                        }
                    }
                })
            }
            else if (that.hasClass('searchLink')){  //搜索关系
                $.each(parent.data.object.fks,function(i,v){
                    if (v.fkId == that.parent().siblings('.linkRelation').attr('data-fkId')){
                        var cell = parent.graph.getCell(v.fkId);
                        cell.toFront();
                        console.log(cell);
                        var cellView =  parent.paper.findViewByModel(cell);
                        cellView.$el.find('.connection').addClass('linkHighlight');
                        cellView.$el.find('.marker-target').addClass('linkTargetHighlight');

                    }
                });
                $.each(parent.data.object.dataObjects,function(i,v){
                    if (v.objectId == fieldName('.linkRelation')){
                        var cell = parent.graph.getCell(v.objectId);
                        if (!parent.paperScroller.isElementVisible(cell, { strict: true })) {
                            parent.paperScroller.scrollToElement(cell);
                        }
                    }
                })
            }
            function fieldName(a){
                return that.parent().siblings(a).attr('data-index');
            }
        });
    },  //点击搜索表格
    dataTableRender : function(id){         //封装的方法
        $('#' + id).DataTable({
            paging: false,
            ordering:  false,
            language : {
                search : '搜索：'
            },
            info: false,
        });
    },
    init : function(){
        this.tableDataInsert();
        this.clickToSearchTable();
    }
};

(function(){
    searchTableView.init();
})();

</script>
</body>

</html>